iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 9
1

在Leaflet中,Other Layers包含:

  • LayerGroup
  • FeatureGroup
  • GeoJSON
  • GridLayer

LayerGroup

我們可以利用layerGroup管理多個圖層,將要管理的圖層加到layerGroup裡面來,就等於是操作layerGroup這一個圖層。我們來看一下範例:

L.layerGroup([marker1, marker2])
    .addLayer(polyline)
    .addTo(map);

第1行就是建立layerGroup的程式碼,可以看到( )裡面用陣列包起來,陣列裡面有marker1與marker2兩個點。
第2行實現layetGroup其中一個Method:addLayer(),這一行表示將polyline這個圖層也加入到第1行的layerGroup中。
第三行則是將layerGroup加到地圖中,因此現在地圖上會有3個圖層(marker1, marker2, marker3)

FeatureGroup

FeatureGroup從LayerGroup擴展過來的,據官網的說法是,他比layerGroup更容易對group中的圖層做同樣的事情,例如加popup或是設定按鈕事件等等。

目前還不清楚layerGroup與featureGroup之間的差別,但參考別人的範例或是一些課程的影片,似乎都用featureGroup操作。來看一下範例:

L.featureGroup([marker1, marker2, polyline])
    .bindPopup('Hello world!')
    .on('click', function() { alert('Clicked on a member of the group!'); })
    .addTo(map);

跟layerGroupu一樣,第1行是建立featureGroup,並加入marker1marker2polyline這三個圖層。
第2行在每個圖層建立popup,內容為 'Hello world!'
第3行設定click事件,當按下後跳出alert小視窗,內容為 'Clicked on a member of the group!'
第4行將設定好的featureGroup加入地圖中。

GeoJSON

這個我覺得很好用,因為只要提供的geoJSON資料沒有錯誤,他就會自動幫你讀取內容並轉成圖層。假設有個geoJSON的資料,命名為geoData,這時只要簡單的使用一行程式碼就可以建立圖層:

L.geoJSON(data).addTo(map);

是不是既快速又方便!!!
而且如果geoJSON裡面已經有包含一些資訊像是名稱、地址等等,在建立時就可以順便設定popup了,相比於其他塗層建置方式會輕鬆很多!相關的建置範例會在後面的文章提到~

GridLayer

GridLayer有點類似rasterLayer,但我還不清楚他的作用,只好在這邊跟大家說抱歉啦......


上週好不容易完成了6天的鐵人賽文章,結果隔天一上班就接到壞消息,當天還距離7分鐘踩死線,真是有驚無險(擦汗。到今天已經連三天趕工了,希望明天之後能夠稍微喘息一下。


上一篇
08. Leaflet_Vector Layers(下)
下一篇
10. Leaflet_Basic Types
系列文
使用Leaflet及Folium開啟網頁地圖大門30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言